<script setup lang="ts">
import type { CronItem } from '~/composables/cron'
import { useCornFormat } from '~/composables/cron'

// const startYear = unref(useToNumber(useDateFormat(useNow(), 'YYYY')))
const startYear = 2020 // unref(useToNumber(useDateFormat(useNow(), 'YYYY')))
const yearOptions = new Array(20).fill(0).map((_, index) => ({ value: startYear + index, label: startYear + index }))
const data = reactive<CronItem>({
  type: '*',
  intervalStart: startYear,
  interval: 5,
  rangeStart: startYear,
  rangeEnd: startYear + 5,
  nearestWeekday: 1,
  beforeEndMonth: 1,
  specific: [startYear], // 指定
})

const formatStr = useCornFormat(data)
defineExpose({
  formatStr,
})
</script>

<template>
  <a-radio-group v-model:value="data.type">
    <a-radio class="item" value="*">
      每一年
    </a-radio>
    <a-radio class="item" value="interval">
      <span class="flex items-center">
        从<a-select v-model:value="data.intervalStart" class="mx-2 w-[80px]" show-search :options="yearOptions" @click.prevent />年开始,
        每隔<a-input-number v-model:value="data.interval" class="mx-2" :min="1" :max="100" />年
      </span>
    </a-radio>
    <a-radio class="item" value="range">
      <span class="flex items-center">
        周期从<a-select v-model:value="data.rangeStart" class="mx-2 w-[80px]" show-search :options="yearOptions" @click.prevent />
        到<a-select v-model:value="data.rangeEnd" class="mx-2 w-[80px]" show-search :options="yearOptions" @click.prevent />年
      </span>
    </a-radio>
    <a-radio class="item" value="specific">
      <div class="flex items-center">
        <span class="flex-shrink-0 mr-4">指定</span>
        <!-- <a-select v-model:value="data.specific" class="mx-2 w-[200px]" mode="multiple" allow-clear :options="yearOptions" @click.prevent /> -->
        <a-checkbox-group v-model:value="data.specific" name="checkboxgroup" :options="yearOptions" />
      </div>
    </a-radio>
  </a-radio-group>
</template>

<style scoped lang="less">
.item {
@apply flex line-height-8 mb-2;
}
</style>
